<template>
    <div class="home-index">
        <div class="page-header">
            <!-- <p class="day-text muted">『 {{ yiyan.hitokoto }}』 —— 《{{ yiyan.from }}》 <a class="muted" @click="getYiYan">
                <a-icon type="reload"/>
            </a>
            </p> -->
            <div class="header-content">
                <div class="left-content">
                    <!-- <div class="avatar">
                        <a-avatar :size="64" :src="userInfo.avatar">{{userInfo.name}}</a-avatar>
                    </div>
                    <div class="user-info">
                        <div class="title">{{helloTime}}{{ userInfo.name }}，祝你开心每一天！</div>
                        <div class="team muted" v-if="userInfo.position">{{userInfo.position}}
                            <template v-if="userInfo.department"> | {{ userInfo.department }}</template>
                        </div>
                    </div> -->
                </div>
                <div class="right-content">
                    <div class="content-item">
                        <div class="item-title muted">
                            任务数
                        </div>
                        <div class="item-text">
                            <span>{{task.total}}</span>
                        </div>
                    </div>
                    <div class="content-item">
                        <div class="item-title muted">
                            团队人数
                        </div>
                        <div class="item-text">
                            <span>{{accounts.total}}</span>
                        </div>
                    </div>
                    <div class="content-item">
                        <div class="item-title muted">
                            项目总数
                        </div>
                        <div class="item-text">
                            <span>{{projectTotal}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--<wrapper-content :showHeader="false">-->
        <div class="page-wrapper">
            <a-row :gutter="24">
                <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
                    <a-card
                            class="project-list"
                            :loading="loading"
                            style="margin-bottom: 24px;"
                            :bordered="false"
                            :body-style="{ padding: 0 }">
                        <!-- <router-link to="/project/list/my" slot="extra">全部项目</router-link> -->
                        <div slot="title">
                            <div class="flex ant-row-flex-space-between ant-row-flex-middle">
                                <span>
                                    <span>{{ (otherMemberName ? otherMemberName + ' 进行中的项目' :  '进行中的项目') }} · {{projectList.length || ''}}</span>
                                    <router-link :target="targetFromWorkspace()" :to="appendFromWorkspaceUrl('/project/list/my?join=1')" style="margin-left:10px;font-size:13px;">
                                        申请加入项目
                                    </router-link>
                                </span>
                                <span>
                                    <a-select v-model="project.all" @select="projectSelectChange" :defaultActiveFirstOption="true" :dropdownMatchSelectWidth="false">
                                        <a-select-option :key="0">我的项目</a-select-option>
                                        <a-select-option :key="1">全部进行中的项目</a-select-option>
                                        <a-select-option :key="2">全部项目</a-select-option>
                                        <a-select-option :key="11">全部项目（按git更新时间排序）</a-select-option>
                                        <a-select-option :key="180">近半年项目（按git更新时间排序）</a-select-option>
                                        <a-select-option :key="360">近一年项目（按git更新时间排序）</a-select-option>
                                    </a-select>
                                </span>
                            </div>
                        </div>
                        <div>
                            <a-card-grid style="width:50%" class="project-card-grid" :key="i" v-for="(item, i) in projectList">
                                <a-card :bordered="false" :body-style="{ padding: 0 }">
                                    <a-card-meta>
                                        <div slot="title" class="card-title">
                                            <router-link :target="targetFromWorkspace()" :to="appendFromWorkspaceUrl('/project/space/task/' + item.code)" style="margin:0px;">
                                                <a-avatar size="small" style="margin-right:5px;" :src="item.cover">{{(item.description || item.name).substring(0,1)}}</a-avatar>
                                                <a-icon type="star" theme="filled" style="color: #ffaf38;margin-right: 6px;" v-show="item.collected"/>{{ item.name }}
                                            </router-link>
                                        </div>
                                        <div slot="description" class="card-description">
                                            <a-tooltip :mouseEnterDelay="1.3"
                                                       :title="item.description">
                                            <span class="description-text">
                                                <span v-if="item.description">{{ item.description }}</span>
                                                <span v-else>暂无介绍</span>
                                            </span>
                                            </a-tooltip>
                                            <a-tooltip placement="right" :mouseEnterDelay="1.3"
                                                       :title="`当前进度：${item.schedule}%`">
                                                <a-progress :strokeWidth="2"
                                                            :percent="item.schedule"/>
                                            </a-tooltip>
                                        </div>
                                    </a-card-meta>
                                    <div class="project-item">
                                        <!-- <a href="/#/">{{ item.owner_name }}</a> -->
                                        <!-- <span class="datetime">{{ formatTime(item.create_time) }}</span> -->

                                        <span slot="actions">
                                            <a-tooltip title="git信息" :mouseEnterDelay="1.3">
                                                <a-icon type="branches" style="font-size: 1.3em;"/>
                                            </a-tooltip>
                                        </span>
                                        <a-popover :title="'Git更新信息 - '+item.name + ' - ' + item.description" trigger="click" @mouseenter="gitTooltipMouseenter(item)" @visibleChange="gitTooltipVisibleChange" :overlayClassName="'gitTooltipClass'+' gitTooltipId-'+item.name.replace('.', '-')" placement="right" :style="gitTooltip.style">
                                            <template slot="content">
                                                {{ item.git_info_tip }}
                                            </template>
                                            <span class="member-info" style="float:left; color: rgba(0, 0, 0, 0.45);">{{ item.git_info }}</span>
                                        </a-popover>
                                    </div>
                                    <div class="project-item">
                                        
                                        <!-- <router-link target="_blank" :to="'/project/space/task/' + item.code" style="margin:0px;">
                                            <a-avatar size="small" style="margin-right:5px;" :src="item.cover">{{(item.description || item.name).substring(0,1)}}</a-avatar>
                                            <a-icon type="star" theme="filled" style="color: #ffaf38;margin-right: 6px;" v-show="item.collected"/>{{ item.name }}
                                        </router-link> -->
                                        <span slot="actions">
                                            <a-tooltip title="任务列表信息" :mouseEnterDelay="1.3">
                                                <a-icon type="bars" style="font-size: 1.3em;"/>
                                            </a-tooltip>
                                        </span>
                                        <a-tooltip :title="item.project_stage_info" :mouseEnterDelay="1.3">
                                            <router-link :target="targetFromWorkspace()" :to="appendFromWorkspaceUrl('/project/space/task/' + item.code)" style="margin:0px;">
                                                <span class="member-info" style="float:left">{{ item.project_stage_info || '无任务' }}</span>
                                            </router-link>
                                        </a-tooltip>
                                        <!-- <a-list-item :key="indexM" v-for="(itemM, indexM) in item.member_account_info_list">
                                            <a-list-item-meta>
                                                <div slot="title">
                                                    <router-link :to="'/members/profile/' + itemM.code + '?key=1'"
                                                    >
                                                    <span class="member-info">{{ itemM.name }}</span>
                                                    </router-link>
                                                </div>
                                            </a-list-item-meta>
                                        </a-list-item> -->
                                        
                                    </div>
                                    <div class="project-item">
                                        
                                        <span slot="actions" @click.stop.prevent="inviteProjectMember(item)">
                                            <a-tooltip title="管理成员" :mouseEnterDelay="1.3">
                                                <a-icon type="team" style="font-size: 1.3em;"/>
                                                
                                            </a-tooltip>
                                        </span>
                                        
                                        <a-tooltip :title="item.member_account_info_list.map(e => e.name).join(',')" :mouseEnterDelay="1.3">
                                            <span :key="itemI" v-for="(itemM, itemI) in item.member_account_info_list">
                                                    <span slot="title">
                                                        <router-link :to="'/members/profile/' + itemM.code + '?key=1'"
                                                        >
                                                        <span class="member-info">{{ itemM.name }}</span>
                                                        </router-link>
                                                    </span>
                                            </span>
                                        </a-tooltip>
                                        <span slot="actions" @click.stop.prevent="inviteProjectMember(item)">
                                            <a-tooltip title="管理成员" :mouseEnterDelay="0.5">
                                                <a-icon type="user-add" class="member-info-color" style="margin-left: 5px;"/>
                                                
                                            </a-tooltip>
                                        </span>
                                        
                                    </div>
                                    
                                    
                                </a-card>
                            </a-card-grid>
                            <p class="muted text-center m-t-md m-b-md" v-if="!projectList.length">暂无项目</p>
                        </div>
                    </a-card>
                    <a-card class="activities-list" :loading="loading" :title="'团队  · ' + (accounts.total || '')" :bordered="false">
                        <a-list>
                            <a-list-item :key="index" v-for="(item, index) in accounts.list">
                                <a-list-item-meta>
                                    <div slot="title">
                                                <a-avatar size="small" :src="item.avatar">{{item.name.substring(0,1)}}</a-avatar>
                                                <a-tooltip :title="'查看 ' + item.name+  ' 的信息'" :mouseEnterDelay="1.3">
                                                    <router-link :to="'/members/profile/' + item.membar_account_code + '?key=1'"
                                                    >
                                                        {{item.name}}
                                                    </router-link>
                                                </a-tooltip>
                                                <a-tooltip :mouseEnterDelay="1.3" :title="'查看 ' + item.name+  ' 的工作台'" class="right-item" v-if="userInfo.code != item.member_code">
                                                    <router-link :to="'/home/'+currentOrganization.code+'?init=2&memberCode=' + item.member_code"
                                                    >
                                                        查看 {{item.name}} 的工作台
                                                    </router-link>
                                                </a-tooltip>

                                                <a-row>
                                                    <a-row v-if="item.task_info || item.create_task_count">
                                                        <span>
                                                            <a-tag>任务</a-tag>
                                                            <span>{{ (item.task_info||'') + (item.create_task_count ? (item.task_info ? ',' : '')+'创建:'+item.create_task_count : '') }}</span>
                                                        </span>
                                                    </a-row>
                                                    <a-row v-if="item.project_count" >
                                                        <span>
                                                            <a-tag>项目{{ item.project_count }}个</a-tag>
                                                            <span :key="index" v-for="(item, index) in item.project_info_list">
                                                                <a-tooltip :title="item.description || item.name" :mouseEnterDelay="1.3">
                                                                    <router-link :target="targetFromWorkspace()" :to="appendFromWorkspaceUrl(`/project/space/task/${item.code}`)" :style="index % 2 ? {color:'#1866ff', fontSize:'1.1em'} : {color: '#1890ff', fontSize:'1em'}"
                                                                    >
                                                                        {{item.name}}
                                                                    </router-link>

                                                                </a-tooltip>
                                                            </span>
                                                        </span>
                                                    </a-row>
                                                </a-row>
                                    </div>
                                </a-list-item-meta>
                            </a-list-item>
                        </a-list>
                        <!-- <div class="members">
                            <a-row>
                                <a-col :span="24" v-for="(item, index) in accounts.list" :key="index">
                                    <a @click="routerLink('/members/profile/' + item.membar_account_code + '?key=3')" style="display: flex;align-items: center"
                                    >
                                        <a-avatar size="small" :src="item.avatar">{{item.name.substring(0,1)}}</a-avatar>
                                        <span class="member">{{ item.name }}</span>
                                        <span class="right-item">{{ item.task_info }}</span>
                                    </a>
                                </a-col>
                            </a-row>
                        </div> -->
                        <!-- <a-pagination class="pull-right m-b" :defaultPageSize="accounts.pageSize" size="small" v-show="accounts.total > accounts.pageSize" v-model="accounts.page" :total="accounts.total" @change="onLoadMoreAccounts"/> -->
                    </a-card>
                    
                </a-col>
                <a-col
                        style="padding: 0 12px"
                        :xl="12"
                        :lg="24"
                        :md="24"
                        :sm="24"
                        :xs="24">
                    <a-card class="tasks-list" style="margin-bottom: 24px"
                            :bordered="false">
                        <div slot="title">
                            <div class="flex ant-row-flex-space-between ant-row-flex-middle">
                                <span>{{ (otherMemberName || '我') }} 的任务 · {{task.total || ''}}</span>
                                <a-select v-model="task.done" @select="taskSelectChange" :defaultActiveFirstOption="false" :dropdownMatchSelectWidth="false">
                                    <a-select-option :key="0">未完成(包括7天内已完成的任务)</a-select-option>
                                    <a-select-option :key="1">已完成</a-select-option>
                                    <a-select-option :key="-1">所有任务</a-select-option>
                                </a-select>
                            </div>
                        </div>
                        <a-tabs defaultActiveKey="1" :animated="false" @change="taskTabChange">
                            <a-tab-pane key="1">
                                <span slot="tab"><a-icon type="bars" />我执行的</span>
                            </a-tab-pane>
                            <a-tab-pane key="2">
                                <span slot="tab"><a-icon type="team" />我参与的</span>
                            </a-tab-pane>
                            <a-tab-pane key="3">
                                <span slot="tab"><a-icon type="rocket" />我创建的</span>
                            </a-tab-pane>
                            <a-tab-pane key="88">
                                <span slot="tab"><a-icon type="bars" />所有的任务</span>
                            </a-tab-pane>
                            <a-tab-pane key="89">
                                <span slot="tab"><a-icon type="bars" />所有成员执行的任务</span>
                            </a-tab-pane>
                        </a-tabs>
                        <a-list :loading="task.loading">
                            <a-list-item :key="index" v-for="(item, index) in task.list">
                                <a-list-item-meta>
                                    <div slot="title">
                                        <div style="display: flex;justify-content: space-between ">
                                            <router-link :target="targetFromWorkspaceThis(task.page, item)"
                                                         class="task-title-wrap"
                                                         :to="appendFromWorkspaceUrlForHomeTaskDetailThis(`/project/space/task/${item.projectInfo.code}/detail/${item.code}`, task.page)">
                                                <a-tooltip :title="stageTitle(item)" :mouseEnterDelay="0.5">
                                                    <a-tag :color="stageColor(item.stage_name)">{{item.stage_name}}</a-tag>
                                                </a-tooltip>
                                                <a-tooltip title="优先级" v-if="item.priText != '普通'" :mouseEnterDelay="1.3">
                                                    <a-tag :color="priColor(item.pri)">{{item.priText}}</a-tag>
                                                </a-tooltip>
                                                <a-tooltip title="标签" v-if="item.tag_infos" :mouseEnterDelay="1.3">
                                                    <a-tag :color="item.tag_infos_color">{{item.tag_infos}}</a-tag>
                                                </a-tooltip>
                                                <a-tooltip title="无git" v-if="item.done && !item.git_info" :mouseEnterDelay="1.3">
                                                    <a-tag color="red">无git</a-tag>
                                                </a-tooltip>
                                                <a-icon type="check-square" v-if="item.done"/>
                                                <a-tooltip :mouseEnterDelay="0.5" :title="item.name + '（'+(item.log_time && sameTsp(item.log_time, item.done_time) ? '完成时间：'+item.log_time +'，': '')+(item.log_time && !sameTsp(item.log_time, item.done_time) ? '修改时间：'+item.log_time +'，': '') + (item.done_time && !sameTsp(item.done_time, item.log_time) ? '完成时间：'+item.done_time +'，': '') + ('创建时间：' +item.create_time + '，创建人：'+item.create_member_name+'）')">
                                                    {{ item.name }}
                                                </a-tooltip>
                                            </router-link>
                                            <div>
                                                <a-tooltip title="任务开始 - 截止时间" v-if="item.end_time" :mouseEnterDelay="1.3">
                                                    <span class="label m-r-sm" :class="showTimeLabel(item.end_time)">{{showTaskTime(item.begin_time, item.end_time)}}</span>
                                                </a-tooltip>
                                                <a-tooltip title="子任务" v-if="item.pcode" :mouseEnterDelay="1.3">
                                                    <a-icon type="cluster" class="m-r-sm muted"/>
                                                </a-tooltip>
                                                <router-link :target="targetFromWorkspaceThis(task.page, item)" class="muted" :to="appendFromWorkspaceUrlThis('/project/space/task/' + item.projectInfo.code, task.page)">
                                                    <a-tooltip :title="'所属项目：'+item.projectInfo.description">{{ item.projectInfo.name }}</a-tooltip>
                                                </router-link>
                                                <span v-if="(task.taskType == 88 || task.taskType == 89) && item.executor && item.executor.name" style="margin-left:5px" >
                                                    <a-avatar :size="20" :src="item.executor.avatar">{{item.executor && item.executor.name && item.executor.name.substring(0,1)}}</a-avatar>
                                                    <span class="muted">{{ item.executor.name }}</span>
                                                </span>
                                            </div>
                                        </div>
                                        <span style="font-size:0.8em;color:gray">
                                            {{item.log_time && sameTsp(item.log_time, item.done_time) ? '完成时间：'+item.log_time +'，': '')+(item.log_time && !sameTsp(item.log_time, item.done_time) ? '修改时间：'+item.log_time +'，': '') + (item.done_time && !sameTsp(item.done_time, item.log_time) ? '完成时间：'+item.done_time +'，': '') + ('创建时间：' +item.create_time + '，执行人:'+item.executor.name+(item.executor.name == item.create_member_name ? '' : '，创建人:'+item.create_member_name)}}
                                        </span>
                                        
                                    </div>
                                   <!-- <div slot="description">
                                    </div>-->
                                </a-list-item-meta>
                            </a-list-item>
                        </a-list>
                        <a-pagination class="pull-right m-b" size="small" :defaultPageSize="task.pageSize" v-model="task.page" :total="task.total" @change="onLoadMoreTask"/>
                    </a-card>
                    <!-- <a-col
                             style="padding: 0 12px"
                             :xl="8"
                             :lg="24"
                             :md="24"
                             :sm="24"
                             :xs="24">
                         <a-card title="快速开始 / 便捷导航" style="margin-bottom: 24px" :bordered="false"
                                 :body-style="{padding: 0}">
                             <div class="item-group">
                                 <a>操作一</a>
                                 <a>操作二</a>
                                 <a>操作三</a>
                                 <a>操作四</a>
                                 <a>操作五</a>
                                 <a>操作六</a>
                                 <a-button size="small" type="primary" ghost icon="plus">添加</a-button>
                             </div>
                         </a-card>-->
                    <!--    <a-card title="XX 指数" style="margin-bottom: 24px" :loading="radarLoading" :bordered="false" :body-style="{ padding: 0 }">
                            <div style="min-height: 400px;">
                                &lt;!&ndash; :scale="scale" :axis1Opts="axis1Opts" :axis2Opts="axis2Opts"  &ndash;&gt;
                                <radar :data="radarData" />
                            </div>
                        </a-card>-->
                    
                </a-col>
                <a-col
                        style="padding: 0 12px"
                        :xl="12"
                        :lg="24"
                        :md="24"
                        :sm="24"
                        :xs="24">
                    <a-card class="activities-list" :loading="loading" title="动态"  :bordered="false">
                        <a-list>
                            <a-list-item :key="index" v-for="(item, index) in logs.list">
                                <a-list-item-meta>
                                    
                                    <!-- <a-avatar slot="avatar" :src="item.member_avatar">{{item.member_name.substring(0,1)}}</a-avatar> -->
                                    <div slot="title" style="display:flex; justify-content: space-between;">
                                        <!-- <span>{{ item.member_name }}</span> -->
                                        <a @click="routerLink('/members/profile/' + item.member_account_code + '?key=1')" style="display: flex;align-items: center;"
                                        >
                                            <a-avatar size="small" :src="item.member_avatar">{{item.member_name.substring(0,1)}}</a-avatar>
                                            <span class="member" style="white-space: nowrap;">{{ item.member_name }}</span>
                                            <span v-if="item.is_comment == 0">  <span v-html="item.remark " style="white-space: nowrap;"></span></span>
                                            <span v-if="item.is_comment == 1"><span style="white-space: nowrap;">发表了评论</span>
                                            </span>
                                            <!-- <span class="right-item">{{ item.task_info }}</span> -->
                                        </a>
                                        <span v-if="item.is_comment == 1">{{ item.content }}</span>

                                        <router-link :target="targetFromWorkspace(logs.page)"
                                                :to="appendFromWorkspaceUrlForHomeTaskDetailThis(`/project/space/task/${item.project_code}/detail/${item.source_code}?`, logs.page)"
                                                v-if="item.task_name">「 {{ item.task_name }} 」
                                        </router-link>
                                        <router-link :target="targetFromWorkspaceThis(logs.page, item)" :to="appendFromWorkspaceUrlThis(`/project/space/task/${item.project_code}`, logs.page)"
                                                v-if="!item.task_name && item.content">
                                            {{item.content}}
                                        </router-link>
                                    </div>
                                    <div slot="description">
                                        <!--<a-tooltip :mouseEnterDelay="0.3" :title="item.create_time">-->
                                        {{ item.create_time_disp || '' }} -
                                        <!-- {{ formatTime(item.create_time) }} - -->
                                        <router-link :target="targetFromWorkspaceThis(logs.page, item)" :to="appendFromWorkspaceUrlThis(`/project/space/task/${item.project_code}`, logs.page)" class="muted">
                                            {{item.project_name}}
                                        </router-link>
                                        <!--</a-tooltip>-->
                                    </div>
                                </a-list-item-meta>
                            </a-list-item>
                        </a-list>
                        <a-pagination class="pull-right m-b" size="small" :defaultPageSize="logs.pageSize" v-model="logs.page" :total="logs.total" @change="getTaskLog"/>
                    </a-card>
                </a-col>
            </a-row>
        </div>
        <invite-project-member
            v-model="showInviteMember"
            :project-code="currentProjectCode"
            @close="getProjectList"
            v-if="showInviteMember"
        ></invite-project-member>
        <!--</wrapper-content>-->
    </div>
</template>
<script>
    import inviteProjectMember from '@/components/project/inviteProjectMember'
    import {mapState} from 'vuex'
    import moment from "moment";
    // import {getYiYan} from "../../api/other";
    import {formatTaskTime, relativelyTime, showHelloTime} from "../../assets/js/dateTime";
    import {selfList as getProjectList, list, list as listProject} from "../../api/project";
    import {list as accountList} from "../../api/user";
    import pagination from "../../mixins/pagination";
    import {getLogBySelfProject, selfList} from "../../api/task";
    import task from "../project/space/task";
    import {getStore} from "../../assets/js/storage";
    const currentOrganization = getStore('currentOrganization', true);
    import config from "@/config/config";
import { notice } from '../../assets/js/notice';
    export default {
        components: {
            inviteProjectMember,
        },
        mixins: [pagination],
        data() {
            let all = parseInt(this.getUrlQuery('all') || 0)
            let taskInit = {
                list: [],
                taskType: '1',
                done: 0,
                total: 0,
                page: 1,
                pageSize: 10,
                loading: false,
            }
            return {
                loading: false,
                yiyan: {},
                projectList: [],
                projectTotal: 0,
                activities: [],
                tasks: [],
                tasksTotal: 0,
                otherMemberName:'',
                currentOrganization,
                showInviteMember: false,
                currentProject: {},
                currentProjectCode: 0,
                currentProjectIndex: 0,
                // accounts: [],
                project: {
                    all:all,
                },
                gitTooltip: {
                    item: {},
                    tsp: '',
                    style:{},
                },
                gitTooltipItem:{},
                accounts: {
                    list: [],
                    total: 0,
                    page: 1,
                    pageSize: 100,
                    loading: false,
                },
                logs: {
                    list:[],
                    total: 0,
                    page: 1,
                    pageSize: 10,
                    loading: false,
                },
                taskInit,
                task: {
                    ...taskInit
                },
            }
        },
        computed: {
            ...mapState({
                userInfo: state => state.userInfo,
                socketAction: state => state.socketAction,
            }),
            helloTime() {
                return showHelloTime()
            },
        },
        created() {
            // this.getYiYan();
            this.init(true, true, true);
        },
        watch:{
            $route: function (to, from) {
                if(this.$route.query.init) {
                    this.task.done = 0
                    this.project.all = 0
                    this.init(true);
                } else {
                    this.init();
                }
            },
            socketAction(val) {
                console.log(val);
                if (val.action === 'organization:task') {
                    this.init(false, false);
                }
            },
        },
        methods: {
            sameTsp(a,b) {
                if(!a || !b) {
                    return false;
                }
                if(a == b) {
                    return true;
                }
                if(Math.abs(new Date(a).getTime() - new Date(b).getTime()) <= 2000) {
                    return true;
                }
                return false;
            },
            init(reset = true, loading = true) {
                if (reset) {
                    this.projectList = [];
                    this.pagination.page = 1;
                    this.pagination.pageSize = 100;
                    this.task = {...this.taskInit}
                }
                this.getProjectList(loading);
                this.getTasks();
                this.getTaskLog();
                this.getAccountList();

            },
            opengiturl(a,b,c,d,e,f) {
                return window.opengiturl(a,b,c,d,e,f)
            },
            fixGitTooltipInfoStep2() {
                this.fixGitTooltipInfoTimeout = null;
                this._fixGitTooltipInfo()
            },
            fixGitTooltipInfo() {
                if(this.fixGitTooltipInfoTimeout) {
                    return;
                }
                this.fixGitTooltipInfoTimeout = setTimeout(this.fixGitTooltipInfoStep2, 100)
            },
            appendFromWorkspaceUrlForHomeTaskDetailThis(url, page) {
                return this.appendFromWorkspaceUrlForHomeTaskDetail(url)
            },
            appendFromWorkspaceUrlThis(url, page) {
                return this.appendFromWorkspaceUrl(url)
            },
            targetFromWorkspaceThis(page, item) {
                let target = ''
                if(page > 1) {
                    target = '_blank';
                } else {
                    target = this.targetFromWorkspace();
                }
                // console.log('page', page, target, item)
                return target;
            },
            _fixGitTooltipInfo(extra_line_count) {
                let project = this.gitTooltip.item
                let info  = ''
                let needExit = false
                this.branches.filter((ele,index) => index < 5).map((branch, branchIndex) => {
                    if(needExit) {
                        return;
                    }
                    info += '<i onclick="window.opengiturl(\''+branch._links.self.href+'\', \'branch\')" class="anticon anticon-branches"><svg viewBox="64 64 896 896" data-icon="branches" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M740 161c-61.8 0-112 50.2-112 112 0 50.1 33.1 92.6 78.5 106.9v95.9L320 602.4V318.1c44.2-15 76-56.9 76-106.1 0-61.8-50.2-112-112-112s-112 50.2-112 112c0 49.2 31.8 91 76 106.1V706c-44.2 15-76 56.9-76 106.1 0 61.8 50.2 112 112 112s112-50.2 112-112c0-49.2-31.8-91-76-106.1v-27.8l423.5-138.7a50.52 50.52 0 0 0 34.9-48.2V378.2c42.9-15.8 73.6-57 73.6-105.2 0-61.8-50.2-112-112-112zm-504 51a48.01 48.01 0 0 1 96 0 48.01 48.01 0 0 1-96 0zm96 600a48.01 48.01 0 0 1-96 0 48.01 48.01 0 0 1 96 0zm408-491a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"></path></svg></i>'
                    info += '【' + (''+(branchIndex+1)) + '. ' + branch.name + '】'

                    if(branch.changesets) {
                        info += '<br>'
                        let changesets_count = branch.changesets.filter((changeset, index) => index < 5 && (changeset.date && moment().diff(moment(changeset.date), 'days') < 30 || index < 2)).length
                        if(extra_line_count && branch.changesets.length > changesets_count) {
                            let changesets_count2 = changesets_count + extra_line_count
                            if(changesets_count2 > branch.changesets.length) {
                                changesets_count2 = branch.changesets.length
                            }
                            if(changesets_count2 > changesets_count) {
                                extra_line_count -= changesets_count2 - changesets_count
                            }
                            changesets_count = changesets_count2
                        }
                        branch.changesets.filter((changeset, index) => index < changesets_count).map( changeset => {
                            if(!changeset.diff && !needExit) {
                                changeset.diff = {list: []}
                                listProject({type:'diff:'+project.name+'/diff/'+changeset.id+'/parsed?limit=10000'}).then(res => {
                                    changeset.diff = {list: res.data}
                                    if(res.data && res.data.length) {
                                        let addLines = 0
                                        let deleteLines = 0
                                        let modifyLines = 0
                                        let addFiles = 0
                                        let modifyFiles = 0
                                        let deleteFiles = 0
                                        let addLinesForAddFiles = 0
                                        let deleteLinesForDeleteFiles = 0
                                        res.data.map(e => {
                                            if(e.type == 'delete') {
                                                deleteFiles++
                                                if(e.deleteLines) deleteLinesForDeleteFiles += e.deleteLines
                                            } else if(e.type == 'modify') {
                                                modifyFiles++
                                                if(e.addLines) addLines += e.addLines
                                                if(e.deleteLines) deleteLines += e.deleteLines
                                                if(e.modifyLines) modifyLines += e.modifyLines
                                            } else if(e.type == 'add') {
                                                addFiles++
                                                if(e.addLines) addLinesForAddFiles += e.addLines
                                            }
                                        })
                                        changeset.diff.addLines = addLines
                                        changeset.diff.deleteLines = deleteLines
                                        changeset.diff.modifyLines = modifyLines
                                        changeset.diff.fileCount = res.data.length
                                        changeset.diff.modifyFiles = modifyFiles
                                        changeset.diff.addFiles = addFiles
                                        changeset.diff.deleteFiles = deleteFiles
                                        changeset.diff.addLinesForAddFiles = addLinesForAddFiles
                                        changeset.diff.deleteLinesForDeleteFiles = deleteLinesForDeleteFiles
                                        this.fixGitTooltipInfo()
                                    }
                                })
                                needExit = true;
                            }
                            let author = (changeset.author||{}).name
                            if(author) {
                                author = author.split('/')[0]
                            }
                            info += '&nbsp;&nbsp;&nbsp;'
                            info += '<i onclick="window.opengiturl(\''+changeset._links.self.href+'\', \'changesets\')" class="anticon anticon-branches"><svg viewBox="64 64 896 896" data-icon="branches" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M740 161c-61.8 0-112 50.2-112 112 0 50.1 33.1 92.6 78.5 106.9v95.9L320 602.4V318.1c44.2-15 76-56.9 76-106.1 0-61.8-50.2-112-112-112s-112 50.2-112 112c0 49.2 31.8 91 76 106.1V706c-44.2 15-76 56.9-76 106.1 0 61.8 50.2 112 112 112s112-50.2 112-112c0-49.2-31.8-91-76-106.1v-27.8l423.5-138.7a50.52 50.52 0 0 0 34.9-48.2V378.2c42.9-15.8 73.6-57 73.6-105.2 0-61.8-50.2-112-112-112zm-504 51a48.01 48.01 0 0 1 96 0 48.01 48.01 0 0 1-96 0zm96 600a48.01 48.01 0 0 1-96 0 48.01 48.01 0 0 1 96 0zm408-491a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"></path></svg></i>'
                            info += author + '【'+ moment(changeset.date).format('YY-M-D H:mm') + '】'
                            if(changeset.description.indexOf('Merge branch') == 0) {
                                let strs = (changeset.description+'').split('Merge branch')
                                let done = false
                                if(strs.length > 1) {
                                    strs = strs[1]
                                    let srcBranchs = strs.split(' of ')
                                    if(srcBranchs.length > 1) {
                                        let srcBranch = srcBranchs[0].trim()
                                        let destBranchs = srcBranchs[1].split(' into ')
                                        if(destBranchs.length > 1) {
                                            let destBranch = destBranchs[1].trim().split(' ')[0].split('\n')[0].split('\r')[0].trim()
                                            
                                            done = true
                                            if(changeset.description.indexOf('Conflicts:') >= 0) {
                                                info += '合并分支(有冲突)：' + srcBranch + ' -> ' + destBranch+ '<br>'
                                            } else {
                                                info += '合并分支：' + srcBranch + ' -> ' + destBranch+ '<br>'
                                            }
                                        }
                                    }
                                }
                                if(!done) {
                                    info += changeset.description.trim().replace(/\n/g, '<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;')+ '<br>'
                                }
                            } else {
                                info += changeset.description.trim().replace(/\n/g, '<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;')+ '<br>'
                            }
                            if(changeset.diff) {
                                info += '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'
                                    
                                let subInfo = ''
                                if(changeset.diff.modifyLines) {
                                    if(subInfo) {
                                        subInfo += ','
                                    }
                                    subInfo += '修改'+changeset.diff.modifyLines+'行'
                                }
                                if(changeset.diff.addLines) {
                                    if(subInfo) {
                                        subInfo += ','
                                    }
                                    subInfo += '添加'+changeset.diff.addLines+'行'
                                }
                                if(changeset.diff.deleteLines) {
                                    if(subInfo) {
                                        subInfo += ','
                                    }
                                    subInfo += '删除'+changeset.diff.deleteLines+'行'
                                }
                                info+=subInfo ? '修改'+changeset.diff.modifyFiles+'个文件('+subInfo+')' : ''
                                info += (changeset.diff.addFiles ? ',添加'+changeset.diff.addFiles+'个文件('+changeset.diff.addLinesForAddFiles+'行)' : '')
                                    +(changeset.diff.deleteFiles ? ',删除'+changeset.diff.deleteFiles+'个文件('+changeset.diff.deleteLinesForDeleteFiles+'行)' : '')
                                    +'<br>'

                            }
                        }) 
                    } else {
                        if(branch.lastCommitter && branch.lastCommitter.name) {
                            if(branch.lastCommitDate && branch.lastCommitDate.length == 20) {
                                info += branch.lastCommitter.name.split('/')[0] + ' 更新于 ' + moment(branch.lastCommitDate).format('YY-M-D H:mm')+'<br>'
                            } else {
                                info += '无更新日期<br>'
                            }
                        } else {
                            info += '无更新者<br>'
                        }

                    }
                    if(branchIndex != this.branches.length - 1) {
                        info += '<br>'
                    }
                })
                if(info) {
                    let element = document.querySelectorAll('.gitTooltipId-'+this.gitTooltip.item.name.replace('.','-')+' .ant-popover-content .ant-popover-inner .ant-popover-inner-content')[0]
                    if(!extra_line_count) {
                        let line_count = info.split('<br>').length
                        if(line_count < 20) {
                            this._fixGitTooltipInfo(20 - line_count)
                        } else {
                            element.innerHTML = info
                        }
                    } else {
                        element.innerHTML = info
                    }
                    setTimeout(()=> {
                        let rect = element.getBoundingClientRect();
                        if(rect.top+rect.height > window.innerHeight) {
                            let top = window.innerHeight - rect.height - 50
                            if(top < 0) {
                                top = 0
                            }
                            this.gitTooltip.style = {top: top}
                        }
                    }, 300)
                }
            },
            gitTooltipVisibleChange(v) {
                let project = this.gitTooltip.item
                if(v && project) {
                    listProject({type:'branches:'+project.name+'/branches/'}).then(res => {
                        this.branches = res.data.branches.sort((a, b) => (b.lastCommitDate+b.name).localeCompare(a.lastCommitDate+a.name)).filter((e, index) => index < 3)
                        this.fixGitTooltipInfo()
                        this.branches.map(branch => {
                            listProject({type:'changesets:'+project.name+'/branches/'+branch.name+'/changesets/?pageSize=20'}).then(res => {
                                if(res.data.changesets) {
                                    
                                    branch.changesets = res.data.changesets
                                    this.fixGitTooltipInfo()
                                }
                            })
                        })
                    })
                }
            },
            gitTooltipMouseenter(item) {
                this.gitTooltip.style = {}
                this.gitTooltip.item = item;
            },
            getProjectList(loading, all) {
                if (loading) {
                    this.loading = true;
                }

                all = all || this.project.all
                if(all >= 11) {
                    all = 2
                }
                let param = {...this.requestData, all: all, pageSize:1000}
                if(this.project.all) {
                    delete param.memberCode
                } else {
                    if(this.$route.query.memberCode) {
                        param.memberCode = this.$route.query.memberCode
                    } else {
                        param.memberCode = this.userInfo.code
                    }
                }

                return getProjectList(param).then(res => {
                    let app = this
                    this.fixResList(res);
                    this.projectList = res.data.list;
                    this.projectList.map(ele => {
                        if(ele.last_git_update_info) {
                            let last_git_update_info = JSON.parse(ele.last_git_update_info)
                            if(last_git_update_info.length) {
                                last_git_update_info = last_git_update_info[0]
                                ele.git_info = '【'+last_git_update_info.name+'】'+last_git_update_info.committer.split('/')[0]
                                if(last_git_update_info.tsp) {
                                    ele.git_info += '更新于'+moment(last_git_update_info.tsp).format('YY-M-D H:mm')
                                }
                            }
                        }
                        if(!ele.git_info && ele.last_git_update_time) {
                            ele.git_info = 'git更新于'+moment(ele.last_git_update_time).format('YY-M-D H:mm')
                        }
                        ele.git_info_tip = ele.git_info
                        if(ele.member_account_infos) {
                            let member_account_infos = ele.member_account_infos.split(',')
                            if(member_account_infos.length) {
                                member_account_infos = member_account_infos.map(ele => ({code:(ele+';;;unknown;;;').split(';;;')[0], name:(ele+';;;unknown;;;').split(';;;')[1]}))
                            }
                            ele.member_account_info_list = member_account_infos
                        } else {
                            ele.member_account_info_list = []
                        }
                        if(ele.project_stage_info) {
                            ele.project_stage_info = ele.project_stage_info.split(',').map(e => e.split(':')[1]+':'+e.split(':')[2]).join()
                        } else {
                            ele.project_stage_info = ''
                        }
                        if(ele.project_done_in_7days) {
                            if(ele.project_stage_info) {
                                ele.project_stage_info += ','
                            }
                            ele.project_stage_info += '7日内已完成:'+ele.project_done_in_7days
                        }

                    })

                    if(this.projectList.length != res.data.total) {
                        notice({
                            title: '项目过多，可能有项目无法显示',
                        }, 'notice', 'error', 5);
                    }

                    if(this.project.all >= 11) {
                        this.projectList = this.projectList.sort((a, b) => (b.last_git_update_time+b.name).localeCompare(a.last_git_update_time+a.name))
                    }
                    this.getGitInfo()
                    this.projectTotal = this.projectList.length;
                    this.loading = false;
                    
                });
            },
            getGitInfo() {
                let ele = this.projectList.find(e => !e.fetch_git_done)
                if(ele) {
                    listProject({type:'branchesLast:'+ele.name}).then(res => {
                        ele.fetch_git_done = 1
                        setTimeout(this.getGitInfo, 10)
                        let last_git_update_info = res.data
                        let needDelete = false;
                        if(last_git_update_info && last_git_update_info.length) {
                            last_git_update_info = last_git_update_info[0]
                            
                            let git_info = '【'+last_git_update_info.name+'】'+last_git_update_info.committer.split('/')[0]
                            if(last_git_update_info.tsp) {
                                git_info += '更新于'+moment(last_git_update_info.tsp).format('YY-M-D H:mm')
                                let now = new Date();
                                
                                if(this.project.all > 11 && moment().diff(moment(last_git_update_info.tsp), 'days') > parseInt(this.project.all)) {
                                    needDelete = true;
                                }
                            } else if (this.project.all > 11) {
                                needDelete = true;
                            }
                            
                            let changed = false
                            if(git_info != ele.git_info) {
                                ele.git_info = git_info
                                ele.git_info_tip = git_info
                                changed = true;
                            }
                            if(ele.last_git_update_time != last_git_update_info.tsp) {
                                ele.last_git_update_time = last_git_update_info.tsp
                                changed = true;
                            }
                            if(changed) {
                                if(this.project.all >= 11) {
                                    this.projectList = this.projectList.sort((a, b) => (b.last_git_update_time+b.name).localeCompare(a.last_git_update_time+a.name))
                                }
                            } else {
                                this.projectList = [...this.projectList]
                            }
                        } else if (this.project.all > 11) {
                            needDelete = true;
                        }
                        if(needDelete) {
                            this.projectList = this.projectList.filter(e => e.name != ele.name)
                            this.projectList = this.projectList.sort((a, b) => (b.last_git_update_time+b.name).localeCompare(a.last_git_update_time+a.name))
                        }
                    })
                }
            },
            getTaskLog() {
                getLogBySelfProject({page: this.logs.page, pageSize: this.logs.pageSize}).then(res => {
                    this.fixResList(res);
                    this.logs.list = res.data.list;
                    this.logs.total = res.data.total;
                    this.logs.list.map(ele => {
                        if(ele.create_time) {
                            ele.create_time_disp = moment(ele.create_time).format('YY-M-D H:mm')
                        }
                    })
                })
            },
            getAccountList() {
                this.accounts.loading = true;
                this.otherMemberName = ''
                accountList({page: this.accounts.page, pageSize: this.accounts.pageSize}).then(res => {
                    this.accounts.loading = false;
                    this.accounts.list =  res.data.list;
                    this.accounts.list.map(ele => {
                        if(ele.project_infos) {
                            ele.project_info_list = ele.project_infos.split(',').map(e => ({name:(e+';;;unknown;;;').split(';;;')[1], code:e.split(';;;')[0], description:e.split(';;;')[2]}))
                        }
                        if(this.$route.query.memberCode && this.$route.query.memberCode == ele.member_code) {
                            this.otherMemberName = ele.name
                        }
                    })
                    this.accounts.total = res.data.total;
                })
            },
            // getYiYan() {
            //     let app = this;
            //     getYiYan(function (data) {
            //         app.yiyan = data
            //     }, 'd')
            // },
            getTasks() {
                this.task.loading = true;
                let param = {page: this.task.page, pageSize: this.task.pageSize, taskType: this.task.taskType, type: this.task.done}
                if(this.$route.query.memberCode) {
                    param.memberCode = this.$route.query.memberCode
                }
                selfList(param).then(res => {
                    this.task.loading = false;
                    this.task.list =  res.data.list;

                    this.task.list.map(ele => {
                        if(ele.tag_infos && ele.tag_infos.indexOf('/') > 0) {
                            ele.tag_infos_color = ele.tag_infos.split(',')[0]
                            if(ele.tag_infos_color.indexOf('/') > 0) {
                                ele.tag_infos_color = ele.tag_infos_color.split('/')[0]
                            }
                            ele.tag_infos = ele.tag_infos.split(',').map(e => e.split('/').length > 1 ? e.split('/')[1] : e).join(',')
                        }
                    })

                    // this.task.list =  this.task.list.concat(res.data.list);;
                    this.task.total = res.data.total;
                })
            },
            taskTabChange(key) {
                console.log(key);
                this.task.taskType = key;
                this.task.loadingMore = true;
                this.task.page = 1;
                this.getTasks();
            },
            projectSelectChange(value) {
                const currentOrganization = getStore('currentOrganization', true);
                let home = config.HOME_PAGE;
                if (currentOrganization) {
                    home = home + '/' + currentOrganization.code;
                }
                home += '?all='+value+"&random="+(Math.random() * 1000000 + 1).toFixed(0)
                this.project.all = value;
                home = this.fixFromWorkspaceUrl(home)
                this.$router.push(home);
            },
            taskSelectChange(value) {
                this.task.done = value;
                this.task.loadingMore = true;
                this.task.page = 1;
                this.getTasks();
            },
            onLoadMoreTask(page, PageSize) {
                this.task.loadingMore = true;
                this.task.page = page;
                this.getTasks();
            },
            onLoadMoreLogs(page, PageSize) {
                this.logs.loadingMore = true;
                this.logs.page = page;
                this.getTaskLog();
            },
            onLoadMoreAccounts(page, PageSize) {
                this.accounts.loadingMore = true;
                this.accounts.page = page;
                this.getAccountList();
            },
            stageTitle(item) {
                if(this.task.done == 0) {
                    return '阶段【同时包括7天内已完成的任务】'
                } else {
                    return '阶段'
                }
            },
            stageColor(p) {
                if(p && p.indexOf('进行中') >= 0) {
                    return 'blue'
                }
                if(p && p.indexOf('已完成') >= 0) {
                    return 'green'
                }
                return '';
            },
            priColor(pri) {
                switch (pri) {
                    case 1:
                        return '#ff9900';
                    case 2:
                        return '#ed3f14';
                    default:
                        return 'green';

                }
            },
            formatTime(time) {
                return relativelyTime(time);
            },
            showTaskTime(time, timeEnd) {
                return formatTaskTime(time, timeEnd);
            },
            showTimeLabel(time) {
                let str = 'label-primary';
                if (time == null) {
                    return str;
                }
                let cha = moment(moment(time).format("YYYY-MM-DD")).diff(moment().format("YYYY-MM-DD"), 'days');
                if (cha < 0) {
                    str = 'label-danger';
                } else if (cha == 0) {
                    str = 'label-warning';
                } else if (cha > 7) {
                    str = 'label-normal'
                }
                return str;
            },
            inviteProjectMember(item) {
                this.currentProject = item;
                this.currentProjectCode = item.code;
                this.showInviteMember = true;
            },
        }
    }
</script>
<style lang="less">
    .gitTooltipClass {
        width:40vw;
        .ant-popover-content {
            .ant-popover-inner {
                background-color: peachpuff;
            }
        }
    }

    .home-index {
        .page-header {
            .header-content {
                margin-bottom: 16px;
                display: flex;
                justify-content: space-between;

                .left-content {
                    display: flex;
                    align-items: center;

                    .user-info {
                        margin-left: 12px;
                        line-height: 33px;

                        .title {
                            font-size: 20px;
                        }

                        .team {

                        }
                    }
                }

                .right-content {
                    display: flex;

                    .content-item {
                        padding: 0 32px;
                        position: relative;

                        .item-text {
                            font-size: 30px;

                            .small {
                                font-size: 20px;
                            }
                        }

                        &:after {
                            background-color: #e8e8e8;
                            position: absolute;
                            top: 8px;
                            right: 0;
                            width: 1px;
                            height: 40px;
                            content: "";
                        }

                        &:last-child {
                            &:after {
                                width: 0;
                            }
                        }
                    }
                }
            }
        }

        .page-wrapper {
            margin: 24px;

            .project-list {

                .card-title {
                    font-size: 0;

                    a {
                        color: rgba(0, 0, 0, 0.85);
                        margin-left: 12px;
                        line-height: 24px;
                        height: 24px;
                        display: inline-block;
                        vertical-align: top;
                        font-size: 14px;

                        &:hover {
                            color: #1890ff;
                        }
                    }
                }

                .card-description {
                    color: rgba(0, 0, 0, 0.45);
                    height: 44px;
                    line-height: 22px;
                    overflow: hidden;
                    .description-text{
                        height: 22px;
                    }
                }

                .project-item {
                    display: flex;
                    margin-top: 8px;
                    // overflow: hidden;
                    font-size: 12px;
                    height: 20px;
                    line-height: 20px;

                    a {
                        color: rgba(0, 0, 0, 0.45);
                        display: inline-block;
                        flex: 1 1 0;

                        &:hover {
                            color: #1890ff;
                        }
                    }

                    .datetime {
                        color: rgba(0, 0, 0, 0.25);
                        flex: 0 0 auto;
                        float: right;
                    }

                    .git-info {
                        color: rgba(0, 0, 0, 0.6);
                        flex: 0 0 auto;
                        float: right;
                    }

                    .member-info {
                        color: #1890ff;
                        flex: 0 0 auto;
                        float: right;
                        font-size: 12px;
                        height: 12px;
                        padding: 2px;
                        line-height: 12px;
                    }

                    .member-info-color {
                        color: #1890ff;
                    }
                }

                .ant-card-meta-description {
                    color: rgba(0, 0, 0, 0.45);
                    height: 44px;
                    line-height: 22px;
                    overflow: hidden;
                }
            }

            .activities-list {
                .ant-list-item-meta-title {
                    position: relative;
                }

                .comment-text {
                    margin-bottom: 0;
                }

                .right-item {
                    float: right;
                    position: absolute;
                    right: 0;
                    top: 0;
                }
            }

            .tasks-list {
                .ant-card-body {
                    padding: 6px 24px;

                    .ant-list-item-meta, .ant-list-item-meta-content{
                        width: 100%;
                    }

                    .task-title-wrap{
                        /*max-width: 310px;*/
                        flex: 1;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        padding-right: 10px;
                    }
                }
            }

            .item-group {
                padding: 20px 0 8px 24px;
                font-size: 0;

                a {
                    color: rgba(0, 0, 0, 0.65);
                    display: inline-block;
                    font-size: 14px;
                    margin-bottom: 13px;
                    width: 25%;
                }
            }

            .members {
                a {
                    display: block;
                    margin: 12px 0;
                    line-height: 24px;
                    height: 24px;

                    .member {
                        font-size: 14px;
                        color: rgba(0, 0, 0, .65);
                        line-height: 24px;
                        max-width: 100px;
                        vertical-align: top;
                        margin-left: 6px;
                        transition: all 0.3s;
                        display: inline-block;
                    }

                    &:hover {
                        span {
                            color: #1890ff;
                        }
                    }
                }
            }
        }
    }
</style>
